<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../js/vue.js"></script>
<div id="app">
  <div @click="divClick">
    aaa
    <!--1 .stop修饰符可以阻止事件冒泡-->
    <button @click.stop="btnClick">按钮1</button>
  </div>
  <br>
  <form action="baidu">
    <!--2  .prevent可以阻止默认事件，这里就阻止了提交的默认事件-->
    <input type="submit" value="提交" @click.prevent="submitClick" >
  </form>
  <br>
  <!--3 @keyup监听键盘事件，.enter监听确认键-->
  <input type="text" @keyup.enter="keyUp">
  <br>
  <!--4 .once监听的事件只执行一次-->
  <button @click.once="btn2Click">按钮2</button>

</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "第一次，系统的学VUE"
    },
    methods:{
      btnClick(){
        console.log("btnClick");
      },
      divClick(){
        console.log("divClick");
      },
      submitClick(){
        console.log("submitClick");
      },
      keyUp(){
        console.log("keyUp");
      },
      btn2Click(){
        console.log("btn2Click");
      }
    }
  })
</script>

</body>
</html>